<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>班级管理</title>

    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>

<body>

    <div id="app">
        <!--添加表单-->
        <el-dialog title="添加班级" :visible.sync="insertVisible" width="30%">
            <el-form ref="ruleForm" :rules="rules" :model="insertBrand" label-width="80px">
                <el-form-item label="班级名称" prop="classname">
                    <el-input v-model="insertBrand.classname"></el-input>
                </el-form-item>
                <el-form-item label="部门名称" prop="department">
                    <el-input v-model="insertBrand.department"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onInsertSubmit()">提交</el-button>
                    <el-button @click="insertVisible=false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!--修改表单-->
        <el-dialog title="修改班级" :visible.sync="updateVisible" width="30%">
            <el-form ref="ruleForm" :rules="rules" :model="updateBrand" label-width="80px">
                <el-form-item label="班级名称" prop="classname">
                    <el-input v-model="updateBrand.classname"></el-input>
                </el-form-item>
                <el-form-item label="部门名称" prop="department">
                    <el-input v-model="updateBrand.department"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button @click="updateVisible=false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!--搜索表单-->
        <el-form :inline="true" :model="page" class="demo-form-inline">
            <el-form-item label="班级编号">
                <el-input v-model="page.id"  type="Number" placeholder="请输入班级编号"></el-input>
            </el-form-item>
            <el-form-item label="班级名称">
                <el-input v-model="page.classname" placeholder="请输入班级名称"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="queryOnSubmit()">查询</el-button>
            </el-form-item>
        </el-form>
        <!--批量删除按钮 and 新增按钮-->
        <el-row>
            <el-button type="danger" @click="deletes()" plain>批量删除</el-button>
            <el-button type="primary" @click="updateMethod()" plain>新增</el-button>
        </el-row>
        <!--表格-->
        <template>
            <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange">
                <!--复选框-->
                <el-table-column type="selection" width="55">
                </el-table-column>
                <!--索引-->
                <el-table-column type="index" label="索引" width="50">
                </el-table-column>
                <el-table-column prop="id" label="编号" align="center">
                </el-table-column>
                <el-table-column prop="classname" label="班级名称" align="center">
                </el-table-column>
                <el-table-column prop="department" label="部门名称" align="center">
                </el-table-column>
                </el-table-column>

                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改
                        </el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <!--分页条-->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="page.pageNum" :page-sizes="[5, 15, 20, 25]" layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
            <!--总数量-->
        </el-pagination>
</body>

<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="./js/axiosUtil.js"></script>
<script src="./js/yqlUtil.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">


<script>
    new Vue({
        el: "#app",
        data() {
            return {
                /*表格数据*/
                tableData: [],
                /**/
                brand: {
                    status: '',
                    brandName: '',
                    companyName: ''
                },
                currentPage: 1,
                page: {
                    pageNum: 1,
                    pageSize: 5,
                    total: 0,
                    id: '',
                    username: ''
                },

                /*修改对话框标识*/
                updateVisible: false,
                /*添加对话框标识*/
                insertVisible: false,
                /*修改表单数据*/
                updateBrand: {},
                /*添加表单数据*/
                insertBrand: {
                    id: "",
                    brandName: "",
                    companyName: '',
                    ordered: '',
                    description: '',
                    status: 1
                },
                /*批量删除*/
                ids: [],
                /*修改表单状态标识*/
                insertvaluon: true,
                insertvaluoff: false,
                rules: {
                    classname: [
                        { required: true, message: '请输入班级名称' }
                    ],
                    department: [
                        { required: true, message: '请输入部门名称' }
                    ]
                }
            }
        },
        methods: {
            /*查询所有数据*/
            selectAll() {
                axiosGet("/class", this.page).then(resp => {
                    this.tableData = resp.data.data.rows;
                    this.page.total = Number(resp.data.data.total);
                }).catch(error => {
                    this.$message({
                        message: error.data.msg,
                        type: 'warning'
                    });
                })
            },
            /*=============*/
            /*表格*/
            tableRowClassName({ row, rowIndex }) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            /*修改按钮方法*/
            handleEdit(index, row) {
                /*将修改表单对话框展示*/
                this.updateVisible = true;
                this.updateBrand = row;
                //console.log(index, row);
            },
            /*删除按钮方法*/
            handleDelete(index, row) {
                axiosDelete(`/class/${row.id}`).then(resp => {
                    this.$message({
                        showClose: true,
                        message: resp.data.msg,
                        type: 'success'
                    });
                    this.selectAll();
                }).catch(error => {
                    this.$message({
                        message: error.data.msg,
                        type: 'warning'
                    });
                })
            },
            /*复选框*/
            handleSelectionChange(val) {
                this.ids.length = 0;
                for (let i = 0; i < val.length; i++) {
                    this.ids[i] = val[i].id;
                }
                //console.log(val)
            },
            /*分页条*/
            handleSizeChange(val) {
                this.page.pageSize = val;
                this.selectAll();
                //console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.page.pageNum = val;
                this.selectAll();
                //console.log(`当前页: ${val}`);
            },
            /*修改表单提交方法*/
            onSubmit() {
                axiosPut("/class", this.updateBrand).then(resp => {
                    this.$message({
                        showClose: true,
                        message: '通知: 修改成功~~~',
                        type: 'success'
                    });
                    // 将对话框关闭
                    this.updateVisible = false;
                    this.selectAll();
                }).catch(error => {
                    this.$message({
                        message: error.data.msg,
                        type: 'warning'
                    });
                })
            },
            /*添加表单提交方法*/
            onInsertSubmit() {
                this.$refs["ruleForm"].validate((valid) => {
                    if (valid) {
                        axiosPost("/class", this.insertBrand).then(resp => {
                            this.$message({
                                showClose: true,
                                message: '通知: 添加成功~~~',
                                type: 'success'
                            });
                            // 将对话框关闭
                            this.insertVisible = false;
                            this.selectAll();
                        }).catch(error => {
                            this.$message({
                                message: error.data.msg,
                                type: 'warning'
                            });
                        })
                    }
                });
            },
            /*新增按钮*/
            updateMethod() {
                this.insertBrand = {}

                this.insertVisible = true;
            },
            /*查询按钮表单*/
            queryOnSubmit() {
                this.selectAll();
            },
            /*批量删除*/
            deletes() {
                axiosDelete(`/class/${this.ids}`).then(resp => {
                    this.$message({
                        showClose: true,
                        message: resp.data.msg,
                        type: 'success'
                    });
                    this.selectAll();
                }).catch(error => {
                    this.$message({
                        message: error.data.msg,
                        type: 'warning'
                    });
                })
            }
        }
        ,
        /*网页加载完成: 异步获取全部数据*/
        mounted() {
            this.selectAll();
        }
    })
</script>

</html>